iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Modern Web

想轉職的鯊魚從零基礎開始學習JavaScript系列 第 5

想轉職的鯊魚從零基礎開始學習JavaScript Day-05 型別 Primitive type及string字串淺談

  • 分享至 

  • xImage
  •  

前言

先前介紹變數的時候MDN說過

變數(variable)是對值(value)的引用。

值的變更與運算是所有程式語言大部分時間在處理的事情,

而JavaScript是一種弱型別(weakly typed)的語言,

是一種運算上遇到不同型別值的時候會先進行型別轉換後再做運算的語言

不同於強型別的語言會因為型別的不同而無法運算,

但是會因為型別轉換而出現一些預期之外的結果,

跟鯊魚一起學習他們,去理解他們的本質,

當一切都在你的預料之內,就沒有甚麼好怕的了,

Primitive

型別有分兩種,Primitive 跟 Object;而Primitive可細分為下面七種,

除此之外的都被歸類為Object,這邊先針對比較常用的Primitive做說明

項次 型別 樣式
1 string(字串) "字串"、'字串'或‵字串‵(三種不同的引號)
2 number(數字) 9527(就是數字)
3 BigInt 9527n(數字+一個n)
4 boolean(布林值) true、false
5 undefined(未定義) undefined
6 null(空值) null
7 Symbol Symbol([description])

string(字串)

字串字面上就是文字的意思,需要前後透過特殊符號來包裝來表示字串

例如單引號''(single quotation mark)或雙引號""(double quotation mark)

,而他們的使用上有幾個原則:

  • 前後的特殊符號必須相同
// 如果前後不一樣
'shark鯊魚"
// Uncaught SyntaxError: Invalid or unexpected token
// 語法錯誤:無效或是預期之外的符號
"shark鯊魚"
// 前後一樣才能正常執行
  • 如果字串中間有其他引號,請使用其他種引號來包裝

    或是使用跳脫字元\(escape character)

// 單引號中見有單引號時
'I'm a shark!(我是一隻鯊魚!)'
//Uncaught SyntaxError: Unexpected identifier 'm'
// 字串到I就結束了,所以後面的m a shark!(我是一隻鯊魚!)會被當作變數處理
// 而那一串文字因為沒經過宣告,所以會直接報錯
// 可以使用雙引號來解決這問題
"I'm a shark!(我是一隻鯊魚!)"
// 或是使用跳脫字元來處理
'I\'m a shark!(我是一隻鯊魚!)'
  • 跨行連結字串需要用 \反斜線來連接
'I\'m a shark!
(我是一隻鯊魚!)'
// Uncaught SyntaxError: Invalid or unexpected token
'I\'m a shark!\
(我是一隻鯊魚!)'
// "I'm a shark!(我是一隻鯊魚!)"
  • 需要換行的時候 請用\n
"I'm a shark! \n(我是一隻鯊魚!)"
// 在console上面跟node.js上面會有不同的表現

In console
字串_in_console
In node.js
字串_in_node.js

字串很常當作輸出的結果,尤其是跟使用者互動的時候

這時候,字串的組合就顯得相當重要,可以將常用的對話組合,來實現與人的對話

selfIntroduction = "I'm Shark." + " Nice to meet you." 

像這樣運用"+"號,就可以組合出不同的話語了。

Template literals(樣板字面值)

這是一個ES2015新增的新功能,可以將字串製作成一個模組

這模組中間有一個可以替換值${expression}的佔位符(placeholders)

當在乎叫的時候,就會去找${expression}的值並放進字串裡面

let name = "Shark"; // 給name一個值
console.log(`I'm ${name}.`); // 製作一個可以替換name的模組並輸出,此時就會去呼叫name
I'm Shark.
name = "Jerry"; // 替換name的值
console.log(`I'm ${name}.`); // 呼叫新的name值,就可以輸出不同的結果
I'm Jerry.

使用上必須注意,他的前後必須使用``反引號(back-tick,重音符號)來包裹文字

另外Template literals(樣板字面值)還實裝了一些新功能是之前單雙引號做不到的事情

像是他支援多行文字,之前要使用多行文字的時候都必須使用換行符號

而Template literals(樣板字面值)可以不加任何東西就能直接換行

過去單雙引號的時候
字串_in_node.js
現在使用Template literals的時候
Template literals-換行
是不是覺得更方便了呢!!!

結語

還記得昨天說到的DOM嗎?要修改document都要用字串去修改喔!

不管是id、classname還是他們的內文,都是由字串組成的,

所以要對他們做修正就必須使用字串,

關於字串其實還有很多東西可以探索,目前淺談就先說到這邊

等Primitive常用的型別都概述一遍之後,會再深入去介紹字串的method。

鯊語錄

參考資料

MDN-Template_literals
MDN-String
MDN-Primitive


上一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-04 DOM(文件物件模型)(一)
下一篇
想轉職的鯊魚從零基礎開始學習JavaScript Day-06 number、bigint與boolean
系列文
想轉職的鯊魚從零基礎開始學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言